<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>添加预订</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="Thu, 19 Nov 1900 08:52:00 GMT">
    <link rel="shortcut icon" href="images/icons/favicon.ico" th:href="@{/images/icons/favicon.ico}">
    <link rel="apple-touch-icon" href="images/icons/favicon.png" th:href="@{/images/icons/favicon.png}">
    <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png" th:href="@{/images/icons/favicon-72x72.png}">
    <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png" th:href="@{/images/icons/favicon-114x114.png}">
    <!--Loading bootstrap css-->
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
    <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" th:href="@{/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/font-awesome/css/font-awesome.min.css" th:href="@{/vendors/font-awesome/css/font-awesome.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap/css/bootstrap.min.css" th:href="@{/vendors/bootstrap/css/bootstrap.min.css}">
    <!--LOADING STYLESHEET FOR PAGE-->
    <link type="text/css" rel="stylesheet" href="../static/vendors/intro.js/introjs.css" th:href="@{/vendors/intro.js/introjs.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/calendar/zabuto_calendar.min.css" th:href="@{/vendors/calendar/zabuto_calendar.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/sco.message/sco.message.css" th:href="@{/vendors/sco.message/sco.message.css}">
    <!--Loading style vendors-->
    <link type="text/css" rel="stylesheet" href="../static/vendors/animate.css/animate.css" th:href="@{/vendors/animate.css/animate.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-pace/pace.css" th:href="@{/vendors/jquery-pace/pace.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/iCheck/skins/all.css" th:href="@{/vendors/iCheck/skins/all.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-notific8/jquery.notific8.min.css" th:href="@{/vendors/jquery-notific8/jquery.notific8.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css" th:href="@{/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css}">
    <!--Loading style-->
    <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" class="default-style" th:href="@{/css/themes/style1/orange-blue.css}">
    <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" id="theme-change" class="style-change color-change" th:href="@{/css/themes/style1/orange-blue.css}">
    <!--  <link type="text/css" rel="stylesheet" href="css/style-responsive.css">-->
    <!--新增加的css样式-->
    <link type="text/css" rel="stylesheet" href="../static/css/addcss.css" th:href="@{/css/addcss.css}">
    <script src="/static/js/jquery-2.1.1.min.js" th:src="@{/js/jquery-2.1.1.min.js}"></script>
    <script th:src="@{/js/stay/jquery.highlight-5.js}"></script>
    <script th:src="@{/control/calendar/WdatePicker.js}"></script>
    <style>
        #reserve_tab tr td div{
            color: red;
            display: inline-block;
            display: none;
        }
    </style>
</head>
<body class=" ">
    <div>
        <!--BEGIN BACK TO TOP-->
        <a id="totop" href="#"><i class="fa fa-angle-up"></i></a>
        <!-- 引用头部 -->
        <div th:replace="common/top::topFragment"></div>
        <!--END TOPBAR-->
        <div id="wrapper">
            <!-- 引用左菜单导航栏 -->
            <div th:replace="common/leftToolBar::leftToolbar"></div>
            <!--END CHAT FORM-->
            <!--BEGIN PAGE WRAPPER-->
            <div id="page-wrapper">
                <!-- 引用工具条 -->
                <div th:replace="common/toolBar::toolBar"></div>
                <!--END TITLE & BREADCRUMB PAGE-->
                <!--BEGIN CONTENT-->
                <!--右侧区内容的编写 -->
                <div class="page-content">
                    <div th:replace="stay/common/modal::modal"></div>
                    <!-- 添加预订面板 -->
                    <div class="panel panel-grey">
                        <div class="panel-heading">
                            <h1 class="panel-title">添加预订</h1>
                        </div>
                        <form action="" id="addReserveForm" method="post" class="panel-body" style="margin-right: 15px; position: relative;">
                            <table width="1228px" height="200px" style="font-size: 16px;" id="reserve_tab">
                                <tr>
                                    <td><label>客户姓名：</label><input name="customer.name" id="name"/><div id="name_errorMag" >请输入姓名</div></td>
                                    <td><label>身份证号：</label><input name="customer.idNumber" style="text-indent: 8px" placeholder="请输入18位身份证号" id="idNumber"/><div id="idNumber_errorMag">请输入身份证号</div></td>
                                    <td><label>证件类型：</label><input name="customer.idType" id="idType"/><div id="idType_errorMag">请输入证件类型</div></td>
                                </tr>
                                <tr>
                                    <td><label>出生日期：</label><input name="customer.birthday" readonly id="birthday" onclick="WdatePicker()"/><div id="birthday_errorMag">请输入出生日期</div></td>
                                    <td><label>民族：</label><input name="customer.nation" id="nation"/><div id="nation_errorMag">请输入民族</div></td>
                                    <td><label>手机号：</label><input name="customer.phone" style="text-indent: 10px" placeholder="请输入11位手机号" id="phone"/><div id="phone_errorMag">请输入手机号</div></td>
                                </tr>
                                <tr>
                                    <td><label>地址：</label><input name="customer.address" id="address"/><div id="address_errorMag"></div></td>
                                    <td>
                                        <label>性别：</label>
                                            <select name="customer.sex" id="sex">
                                                <option value="-1">请选择</option>
                                                <option value="男">男</option>
                                                <option value="女">女</option>
                                            </select>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <label>是否会员：</label>
                                            <select name="customer.member" id="member">
                                                <option value="-1">请选择</option>
                                                <option value="1">是</option>
                                                <option value="0">否</option>
                                            </select>
                                        <div id="sexAndMember_errorMag">请选择性别或会员</div>
                                    </td>
                                    <td><label>预订时间：</label><input name="reservedDate" id="reservedDate" style="text-indent: 10px" onclick="WdatePicker()"/><div id="reservedDate_errorMag">请输入预订时间</div></td>
                                </tr>
                                <tr>
                                    <td><label>离店时间：</label><input name="checkOutDate" id="checkOutDate" style="text-indent: 10px" onclick="WdatePicker()"/><div id="checkOutDate_errorMag">请输入离店时间</div></td>
                                    <td>
                                        <button type="button" id="addBtn" class="btn btn-grey" onclick="addReserve()">预订</button>
                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                        <button type="button" class="btn btn-grey" onclick="javascript:document.getElementById('addReserveForm').reset();var inputs = $('#reserve_tab tr td input:not(#address)'); /*全部文本框*/inputs.css('border','solid 1px').next().css('display','none');var selects = $('#reserve_tab tr td select');/*全部下拉框*/$(selects.css('border','solid 1px')[1]).next().css('display','none');">重置</button>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <!-- 添加预订时安排房间面板 -->
                    <div class="panel panel-grey">
                        <div class="panel-heading">
                            <h1 class="panel-title">可预订房间</h1>
                        </div>
                            <div style="margin: 11px 0px 11px 12px " id="roomTypeContainer">
                                <button class="btn btn-grey type-name-btn" th:onclick="getRoomByTypeName([[${roomType.typeName}]],this)" th:each="roomType : ${roomTypes}" th:value="${roomType.roomTypeId}">[[${roomType.typeName}]](<span style="color: rgba(255,255,255,0.8);font-weight: bold;font-size: 17px">[[${roomType.usable}]]</span>)</button>
                            </div>
                            <div style="height: 500px;overflow: auto">
                                <table id="roomTab" class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>选择</th>
                                            <th>房间号</th>
                                            <th>楼层</th>
                                            <th>价格/天</th>
                                            <th>价格/时</th>
                                            <th>会员价/天</th>
                                            <th>会员价/时</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr th:each="room : ${rooms}">
                                            <td><input type='radio' th:value="${room.roomId}" name='room.roomId'/></td>
                                            <td th:text="${room.roomId}"></td>
                                            <td th:text="${room.floor.floorName}"></td>
                                            <td th:text="${room.priceDay}"></td>
                                            <td th:text="${room.priceHour}"></td>
                                            <td th:text="${room.memberPriceDay}"></td>
                                            <td th:text="${room.memberPriceHour}"></td>
                                            <td th:text="${room.status.statusName}"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!--END CONTENT-->
            </div>
            <!-- 引用底部 -->
            <div th:replace="common/bottom::bottom"></div>
            <!--END FOOTER-->
            <!--END PAGE WRAPPER-->
        </div>
    </div>
<script th:src="@{/js/stay/reserve.js}"></script>
<script th:src="@{/js/stay/modal.js}"></script>
<script th:src="@{/js/stay/stay.js}"></script>
<script src="../static/js/jquery-ui.js" th:src="@{/js/jquery-ui.js}"></script>
<script>
    //输入身份证号查询客户
    $(function () {
        //显示当前功能导航
        showModuleText("房间预订");
        //来到添加预订页面时默认显示标准单人间下的房间并选中标准单人间选项卡
        $($(".type-name-btn")[0]).addClass("active");
        //给身份证号文本框绑定即时文本改变事件，方便来获取当前输入的身份证号对应的客户信息实现客户信息自动补齐功能
        $("#idNumber").bind("input propertychange",function () {
            var url = "/orders/getCustomersByIdNumber";
            var param = "idNumber=" + $(this).val();
            $.ajax({
                url:url,
                type:"post",
                data:param,
                dataType:"json",
                success:function (data) {
                    var customerData = [];//保存客户信息
                    //将json数据封装到数组中
                    $.each(data,function (index,customer) {
                        customerData[index] = {label:customer.name+" "+customer.idNumber,value:customer.idNumber,state:customer.status}
                    });
                    //通过autocomplete插件实现自动补全
                    var state = 0;
                    $("#idNumber").autocomplete({
                        source:customerData,//数据源
                        select:function (event,ui) { //当选择某一个时触发
                            if (ui.item.state == 0) {
                                showModal("警告提示","该账户是本店的黑名单不可预订");
                                state = 1;
                                return;
                            }
                            var url = "/orders/getCustomerByIdNumber";
                            var param = "idNumber="+ui.item.value;
                            $.post(url,param,function (data) {
                                //获取数据并写入到指定文本框中
                                $("#name").val(data.name);
                                $("#idType").val(data.idType);
                                $("#birthday").val(new Date(data.birthday).toLocaleDateString().replace("/","-").replace("/","-"));
                                $("#nation").val(data.nation);
                                $("#phone").val(data.phone);
                                $("#address").val(data.address);
                                $("#sex").val(data.sex);
                                $("#member").val(data.member);
                            })
                        },
                        close:function (event, ui) { //当显示框消失时触发
                            if (state == 1) $(this).val("");
                        }/*,
                        formatResult:function (data,count,maxCount) { //为下拉框的每一行数据使用标签处理
                            return "asdasdas";
                        }*/
                    });
                }
            });
        });
    });

    //添加预订
    function addReserve() {
        if (!formValidate()) return;
        var url = "/orders/getCustomerByIdNumber";
        var param = "idNumber=" + $("#idNumber").val()
        $.post(url,param,function (data) {
            if (data != null && data.status == 0) {
                showModal("警告提示", "该账户是本店的黑名单不可入住");
                return;
            }
            url = "/orders/getOrdersByIdNumber";
            param = "idNumber=" + $("#idNumber").val()+"&ordersState=预订";
            $.post(url,param,function (data) {
                if (data.length == 1){
                    $.each(data,function (index,orders) {
                        if (orders.status.statusId == 1){
                            showModal("温馨提示","抱歉当前身份证正在入住中不可预订");
                        }else{
                            showModal("温馨提示","抱歉一张身份证只能预订一间房间");
                        }
                    });
                    return;
                }
                url = "/orders/addReserve";
                param = "room.roomType.roomTypeId="+ $("#roomTypeContainer .active").val() +"&room.roomId="+ $("#roomTab tbody tr td input:checked").val() + "&" + $("#addReserveForm").serialize();
                $.post(url,param,function (data) {
                    if (data){
                        showModal("温馨提示","添加成功");
                        setTimeout(function(){location.href = "/orders/getOrdersList?pageNum=1&orderState=预订中";},"2500");
                        return;
                    }
                    showModal("温馨提示","添加失败");
                },"json");
            },"json");
        },"json");
    }

    //获取房型下的房间信息
    function getRoomByTypeName(typeName,btn){
        //让当前按钮高亮其他按钮取消高亮
        $(btn).addClass("active").siblings().removeClass("active");
        //发送ajax请求获取房间信息
        var url = "/orders/getRoomByTypeName";
        var param = "typeName=" + typeName +"&statusName=预订";
        $.post(url,param,function (data) {
            $("#roomTab tbody tr").remove();
            var html;
            $.each(data,function(index,room) {
                html = "<tr>";
                html += "<td><input type='radio' value='"+ room.roomId +"' name='room.roomId'/></td>";
                html += "<td>"+ room.roomId +"</td>";
                html += "<td>"+ room.floor.floorName +"</td>";
                html += "<td>"+ room.priceDay +"</td>";
                html += "<td>"+ room.priceHour +"</td>";
                html += "<td>"+ room.memberPriceDay +"</td>";
                html += "<td>"+ room.memberPriceHour +"</td>";
                html += "<td>"+ room.status.statusName +"</td>";
                html += "</tr>";
                $("#roomTab tbody").append(html);
            });
        },"json");
    }

</script>
<!-- 引用脚本 -->
<div th:replace="common/script::script"></div>
</body>
</html>